Panic Hero
Project Gallery
Panic Hero is a disaster-preparedness app built for a hackathon, using gamified learning to help people understand how to respond in emergencies.
Inspiration: Every year, around 60,000 people lose their lives due to natural disasters worldwide. While many students learn how to respond to emergencies in school, this crucial information doesn't reach everyone. To address this gap, we created Panic Hero — an app designed to teach people how to react in emergency situations and, ultimately, help save lives.
What it does: Our solution leverages gamification — incorporating XP, levels, and mini quizzes — to educate people on the best responses during natural disasters. By using game-like elements, we aim to make disaster preparedness more accessible and compelling.
Clarity: easy-to-navigate interface
Accessibility: readable design for many learners
Engagement: fun mechanics to keep users involved
How we built it: We built Panic Hero with HTML, CSS, JavaScript, TypeScript, Figma, and AI tools. We designed the interface in Figma, then implemented interactive challenges, quizzes, and a badge system to reward progress.
Challenges we ran into: Some of the challenges we faced were inputting some of the information, especially the multiple-choice questions. The login/signup page was also slightly challenging because we were confused about how to make it such that the users would be able to access it. We had frequent issues with styling, where the font color and style often differed from what was intended. We also had difficulty designing a visually appealing homepage that was connected to the rest of the site and maintained consistent navigation. Additionally, it was a challenge to strike a balance between simplicity and functionality, while preserving the core goal of engaging the audience. This required multiple iterations and careful attention to both design and user experience
Accomplishments that we're proud of: We are proud that we were able to make an almost fully functional app despite having limited experience in coding. For most of us, it is our first hackathon, so the fact that we were able to make a website that works and is fun brings us joy. This accomplishment reflects our team's ability to learn quickly and adapt to new tools. It was fun to see our ideas come to life and turn from a boring webpage to an interactive application, and we hope to make a meaningful impact through our project.
What we learned: Throughout the development process, we learned how to effectively use AI prompting, Figma, and various other web development tools. We also learned more coding languages such as TypeScript, Java, HTML, CSS, and a little bit of Python. We already had some knowledge of these languages, but through this project, we had the chance to learn and expand our knowledge of these languages. Most importantly, we learned the power of collaboration and communication. Most of us liked working independently, but all of us coming together, listening to each other's ideas, created a calm, composed, and cohesive environment. It was also an opportunity to learn different skills from each other.
What's next for Panic Hero: Next, we plan to add a heat map that highlights common disaster-prone areas, helping users visualize high-risk zones more effectively. This feature will enhance awareness (it allows the audiences in less disaster-prone areas to realize this problem is a real thing and not something you only see on the news) and improve preparedness by showing real-time or historical data of disaster occurrences, which would help people notice patterns in these disasters and be aware of what disasters are common in their area. This may greatly reduce the chance of people getting hurt from natural disasters and help them take the precautions needed.
Built With: CSS, Figma, HTML5, JavaScript, Replit, TypeScript
Try it out: https://panichero.neocities.org/